<template>
  <div class="box-main">
    <div class="topHeaderCard">
      <a-button type="primary" @click="resetBack" :icon="h(ArrowLeftOutlined)"> 返回 </a-button>
    </div>
    <div class="bax-main-content">
      <div class="page-content">
        <div class="info_card">
          <a-tabs type="card" v-model:activeKey="tabsIndex">
            <a-tab-pane :key="1" tab="入组记录"> </a-tab-pane>
            <a-tab-pane :key="2" tab="管理方案"> </a-tab-pane>
            <a-tab-pane :key="3" tab="关键诊疗事件"> </a-tab-pane>
          </a-tabs>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, h } from 'vue'
import { ArrowLeftOutlined } from '@ant-design/icons-vue'
const emit = defineEmits(['close'])
const tabsIndex = ref(1)
const resetBack = () => {
  emit('close', false)
}

const init = () => {
  tabsIndex.value = 1
}

onMounted(() => {})
</script>
<style lang="less" scoped>
.box-main {
  width: 100%;
  height: 100%;
  padding: 0 !important;
  overflow: hidden !important;

  .topHeaderCard {
    width: 100%;
    height: 48px;
    display: flex;
    align-items: center;
    background-color: #fff;
    padding-left: 24px;

    ::v-deep(.ant-tabs-nav) {
      margin: 0;
    }

    ::v-deep(.ant-tabs-nav-wrap) {
      padding: 0 20px;
      padding-top: 2px;
      height: 48px;
    }
  }

  .bax-main-content {
    width: 100%;
    height: calc(100% - 50px);
    overflow: hidden auto;
    padding: 16px;

    .page-content {
      height: 100%;
      width: 100%;
      display: flex;

      .info_card {
        padding: 16px 24px 24px;
        border-radius: 8px;
        background: #fff;
        width: 100%;
        box-sizing: border-box;
        height: 100%;
        overflow: hidden auto;
      }
    }
  }
}
</style>
